<template>
  <div class="collection-item">
    <el-row>
      <el-col :span="8">
        <div class="collection-side">
          <div class="collection-title">
            {{collection.title}}
            <span class="right">
              <ri i="delete" title="删除" class="right" @click="removecollection"></ri>
            </span>
            <span class="right">
              <ri i="edit" title="编辑" @click="editcollection" size="sm"></ri>
            </span>
          </div>
          <div class="collection-intro">{{collection.intro}}</div>
        </div>
      </el-col>
      <el-col :span="16">
        <!--
        <div class="collection-toolbar">
          <span>文章列表</span>
        </div>
        -->
        <div class="collection-articles">
          <div class="collection-select-pane">
            <el-table
              ref="multipleTable"
              :data="articles"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column label="文章标题" width="600">
                <template slot-scope="scope">
                  <el-link type="info" @click="viewArticle(scope.row)">{{scope.row.title}}</el-link>
                </template>
              </el-table-column>
              <el-table-column label="最近更新">
                <template slot-scope="scope">{{ scope.row.modtime }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
export default {
  props: ["collection"],
  data() {
    return {
      articles: this.collection.children
    };
  },
  computed: {},
  created() {
  },
  methods: {
    editcollection() {
      this.$router.push("/works/collections/edit/" + this.collection.id);
    },
    removecollection() {
      this.$confirm("确认删除文集？")
        .then(() => {
          this.authGet("/api/v1/collections/remove/" + this.collection.id).then(
            () => {
              this.$message("文集删除成功");
              this.$emit("collection-removed", this.collection.id);
            }
          );
        })
        .catch(() => {});
    },
    viewArticle(article) {
      this.$router.push(`/works/articles/${article.id}`);
    }
  }
};
</script>


<style lang="stylus" scoped>
.collection-item
  margin-bottom 20px
  border-bottom 1px solid #eee

  .collection-side
    padding 0 20px

    .collection-title
      font-weight bold
      font-size 1.2em
      padding 10px
      border-bottom 1px dashed #eee
      line-height 27px

      span.right
        float right
        margin-left 10px

        .icon-button
          color #409eff
          cursor pointer

    .collection-intro
      padding 10px
      font-size 1em
      min-height 200px
      max-height 400px

  .collection-articles
    min-height 200px
    max-height 400px

  .collection-toolbar
    padding 10px
    line-height 30px
    height 30px
    border-bottom 1px dashed #eee

    span
      margin-right 20px

      .icon-button 
        color #409eff
        cursor pointer

      label
        margin-left 4px

    span.right
      float right
      margin-right 0px
      margin-left 10px

    span.modtime
      font-size 0.9em
      color #666
</style>
<style lang="stylus">
.collection-content
  h1, h2, h3, h4, p
    margin-bottom 20px

  blockquote
    border-left 3px solid #d4d4d4
    padding-left 10px
    color #888

.v-note-wrapper
  max-height 800px
</style>